<template>
    <div class="ranking">
        <div class="title">官方榜</div>
        <!-- 截取数组slice(0,4) -->
        <div class="li">
            <div>
                <div class="rankimglist" v-for="item in rankinglist.slice(0,1)" :key="item.id">
                <img :src="item.coverImgUrl" alt="">
                </div>
            </div>
            
            <div class="songlist">
                <div @click="songlisthan(songlist.id,songlist)" class="list" v-for="(songlist,index) in bsblist.slice(0,5)" :key="songlist.id">
                    <div>
                    <span>{{index+1}}</span>
                    <span>
                        {{songlist.name}}
                    </span>
                    </div>
                    <div>{{songlist.ar[0].name}}</div>
                </div>
            </div>
        </div>
        <div class="all" @click="all(rankinglist[0].id)">查看全部<i class="el-icon-arrow-right"></i></div>
        <div class="li">
            <div class="rankimglist" v-for="item in rankinglist.slice(1,2)" :key="item.id">
                <img :src="item.coverImgUrl" alt="">
            </div>
            <div class="songlist">
                <div  @click="songlisthan(songlist.id,songlist)"  class="list" v-for="(songlist,index) in xgblist.slice(0,5)" :key="songlist.id">
                <div>
                    <span>{{index+1}}</span>
                    <span>
                        {{songlist.name}}
                    </span>
                </div>
                <div>{{songlist.ar[0].name}}</div>
            </div>
            </div>
            
        </div>
        <div class="all"  @click="all(rankinglist[1].id)">查看全部<i class="el-icon-arrow-right"></i></div>
        <div class="li">
            <div class="rankimglist" v-for="item in rankinglist.slice(2,3)" :key="item.id">
                <img :src="item.coverImgUrl" alt="">
            </div>
            <div class="songlist">
                <div  @click="songlisthan(songlist.id,songlist)"  class="list" v-for="(songlist,index) in ycblist.slice(0,5)" :key="songlist.id">
                <div>
                    <span>{{index+1}}</span>
                    <span>
                        {{songlist.name}}
                    </span>
                </div>
                <div>{{songlist.ar[0].name}}</div>
            </div>
            </div>
        </div>
        <div class="all"  @click="all(rankinglist[2].id)">查看全部<i class="el-icon-arrow-right"></i></div>
        <div class="li">
            <div class="rankimglist" v-for="item in rankinglist.slice(3,4)" :key="item.id">
                <img :src="item.coverImgUrl" alt="">
            </div>
            <div class="songlist">
                <div  @click="songlisthan(songlist.id,songlist)"  class="list" v-for="(songlist,index) in rgblist.slice(0,5)" :key="songlist.id+2">
                <div>
                    <span>{{index+1}}</span>
                    <span>
                        {{songlist.name}}
                    </span>
                </div>
                <div>{{songlist.ar[0].name}}</div>
            </div>
            </div>
        </div>
        <div class="all" @click="all(rankinglist[3].id)">查看全部<i class="el-icon-arrow-right"></i></div>
        <div class="ddd"></div>
        
        
        

    </div>
</template>

<script>
import http from '@/http/http.js'
export default {
    data() {
        return {
            rankinglist:[],
            bsblist:[],     
            xgblist:[],
            ycblist:[],
            rgblist:[]   
        }
    },
    methods: {
        all(id){
            this.$router.push({
                name:'songlistid',
                params:{
                    id
                }
            })
        },
        songlisthan(id,value){
            // this.liindex = index
            this.$store.commit('indexxgai',id)
            
            //通过id请求音乐url地址
            http({
                url:'/song/url',
                params:{
                    id,
                },      
            }).then(res=>{
                // console.log(res.data.data[0])
                this.$store.commit('musicurlhandle',res.data.data[0].url)
                this.$store.commit('isplaybofang')   
            })
            //点击的歌曲信息传入
            this.$store.commit('musicuserhandle',value)

        },
        httpbsblist(id){
            http({
            url:'/playlist/detail',
            params:{
                id
            }
            }).then(res=>{
                 this.bsblist = res.data.playlist.tracks
            })
        },
        httpxgblist(id){
            http({
            url:'/playlist/detail',
            params:{
                id
            }
            }).then(res=>{
                 this.xgblist = res.data.playlist.tracks
            })
        },
        httpycblist(id){
            http({
            url:'/playlist/detail',
            params:{
                id
            }
            }).then(res=>{
                 this.ycblist = res.data.playlist.tracks
            })
        },
        httprgblist(id){
            http({
            url:'/playlist/detail',
            params:{
                id
            }
            }).then(res=>{
                 this.rgblist = res.data.playlist.tracks
                 console.log(this.rgblist)
            })
        },
    },
    mounted() {
        http({
            url:'/toplist'
        }).then(res=>{
            console.log(res)
            this.rankinglist = res.data.list
            
            this.httpbsblist(this.rankinglist[0].id)
            this.httpxgblist(this.rankinglist[1].id)
            this.httpycblist(this.rankinglist[2].id)
            this.httprgblist(this.rankinglist[3].id)

            // this.httplist(this.rankinglist[2].id,this.ycblist)
            // this.httplist(this.rankinglist[3].id,this.rgblist)

            // console.log(this.bsblist)


            
        })
        // console.log(this.rankinglist)
        // this.httplist(this.rankinglist[0].id,this.bsblist)

        
    },
}
</script>

<style lang="less" scoped>
.title{
    font-size: 20px;
    margin: 10px 10px 10px 0;
}
.all{
    font-size: 13px;
    color: #666;
    cursor: pointer;
    margin-left: 170px;
}
.ranking{
    width: 1000px;
    margin: 0 auto;
    .li{
        display: flex;
        width: 800px;
        flex-direction: row;
        margin-top: 20px;
        // justify-content: center;
        // background-color: pink;
        .songlist{
            .list{
                display: flex;
                flex-direction: row;
                width: 600px;
                justify-content: space-between;
                margin-left: 20px;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                color: #666;
                font-size: 12px;
            }
            .list:nth-child(-n+3){  
                span:nth-child(1){
                    color: pink;
                }  
            }
            .list:nth-child(even){
                background-color: #f9f9f9;
            }
            .list:hover{
                background-color: #f0f1f2;
                
            }
        }
            
        }
        
}
.ddd{
    height: 300px;
}

img{
    width: 150px;
    height: 150px;
    border-radius: 5px;
}

</style>